<template>
	<view class="bods">
		<!-- 遮罩层 -->
		<!-- <u-overlay :show="shows" @click="shows = false"></u-overlay> -->
		<u-popup :show="shows" :round="10" mode="center" @close="closes" @open="opens">
			<view class="pops_center">
					<image src="@/static/newimg/success.svg"></image>
					<text style="font-size: 34rpx;margin: 10rpx 0 70rpx 0rpx;" >提交成功</text>
					<view class="btn">
						<p>查看详情</p>
					</view>
					<view class="btn1" @click="backhome">
						<p>返回首页</p>
					</view>
			</view>
		</u-popup>
		<Setps :num='3' :headtitle='headtext' :tit='tit' />
		<view class="formcard">
			<view class="bodtitle" style='border-bottom: none;display: flex;justify-content: space-between;'>
				<p style='flex: 3;'><b>是否取消出差</b><span style='color: red;'><b>*</b></span></p>
				<radio-group @change="radioChange" style="display: flex;justify-content: space-between;flex: 2;">
					<label v-for="(item, index) in items" :key="item.value">
						<view>
							<radio style="transform: scale(.7);" :value="item.value" :checked="index === current" />
							<view style="display: inline-block;padding-right: 10rpx;">
								<p>{{item.name}}</p>
							</view>
						</view>
					</label>
				</radio-group>
			</view>
		</view>

		<!-- 多行文本 -->
		<view class="formcard">
			<view class="bodtitle" style="border-bottom: none;">
				<p><b>基本信息</b></p>
			</view>
			<view class="textarea" style="padding: 20rpx 20rpx;">
				<u--textarea maxlength='100' count v-model="textarea" border='none' placeholder="请输入出差变更原因">
				</u--textarea>
			</view>
		</view>

		<view class="formcard">
			<view class="bodtitle">
				<p><b>基本信息</b></p>
			</view>

			<u-form labelPosition="left" :model="usermodel" :rules="rules" ref="userform">
				<!-- 申请单号 -->
				<u-form-item labelWidth="200rpx" label="申请单号" prop="userInfo.orderId" borderBottom ref="item1">
					<input disabled class="pdlf" type="text" v-model="usermodel.userInfo.orderId">
				</u-form-item>

				<!-- 申请人 -->
				<u-form-item labelWidth="200rpx" label="申请人" prop="userInfo.name" borderBottom ref="item2">
					<input disabled class="pdlf" type="text" v-model="usermodel.userInfo.name">
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>

				<!-- 员工编号 -->
				<u-form-item labelWidth="200rpx" label="员工编号" prop="userInfo.userId" borderBottom ref="item3">
					<input disabled class="pdlf" type="text" v-model="usermodel.userInfo.userId">
				</u-form-item>

				<!-- 所在科室 -->
				<u-form-item labelWidth="200rpx" label="所在科室" prop="userInfo.work" borderBottom ref="item4">
					<input disabled class="pdlf" type="text" v-model="usermodel.userInfo.work">
				</u-form-item>

				<!-- 出差地域 -->
				<u-form-item required labelWidth="200rpx" label="出差地域" prop="userInfo.address" borderBottom>
					<u-radio-group slot='right' v-model="addressradio" placement="row">
						<u-radio :customStyle="{marginLeft: '60rpx'}" v-for="(item, index) in addresslist" :key="index"
							:label="item.name" :name="item.name" @change="radioChange1">
						</u-radio>
					</u-radio-group>
				</u-form-item>

				<!-- 出差类型 -->
				<u-form-item labelWidth="200rpx" label="出差类型" borderBottom>
					<input disabled class="pdlf" type="text" v-model="usermodel.userInfo.boole">
				</u-form-item>

				<!-- 出差日期 -->
				<u-form-item labelWidth="200rpx" label="出差日期">
					<u-calendar @close="close()" :show="dateshow" :mode="mode" @confirm="date_confirm">
					</u-calendar>
					<input @click="dateshow= true" v-if="isdate" class="pdlf" type="text" disabled
						v-model="usermodel.userInfo.prpnum" placeholder="请选择">
					<view style="display: flex;" v-else>
						<view>
							<label>{{datetime}}</label>
						</view>

						<span style='padding: 0 20rpx;'>共{{day}}天</span>
						<view>
							<label>{{datetime1}}</label>
						</view>
					</view>
				</u-form-item>

				<!-- 是否入住酒店 -->
				<u-form-item required labelWidth="210rpx" label="是否入住酒店">
					<p style='width: 100%;display: flex;justify-content: right;'>
						<u-switch v-model="usermodel.userInfo.isshop" size="20"></u-switch>
					</p>
				</u-form-item>

				<!-- 同行人数 -->
				<u-form-item labelWidth="200rpx" label="同行人数" borderBottom>
					<input class="pdlf" type="text" v-model="usermodel.userInfo.prpnum" placeholder="请输入">
				</u-form-item>

				<!-- 是否携带电脑 -->
				<u-form-item required labelWidth="210rpx" label="是否携带电脑">
					<p style='width: 100%;display: flex;justify-content: right;'>
						<u-switch v-model="usermodel.userInfo.iscmd" size="20"></u-switch>
					</p>
				</u-form-item>

				<!-- 台数 -->
				<u-form-item labelWidth="210rpx" label="台数">
					<input class="pdlf" type="text" v-model="usermodel.userInfo.cmdnum" placeholder="请输入">
				</u-form-item>

				<!-- 携带人 -->
				<u-form-item labelWidth="210rpx" label="携带人">
					<input type="text" v-model="usermodel.userInfo.xdr" disabled class="pdlf" placeholder="请选择">
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>

				<!-- 出差地址 -->
				<u-form-item required labelWidth="210rpx" label="出差地址">
					<input class="pdlf" type="text" v-model="usermodel.userInfo.ccdz" placeholder="请输入">
				</u-form-item>
				<!-- 出差事由 -->
				<u-form-item required labelWidth="210rpx" label="出差事由">
					<input class="pdlf" type="text" v-model="usermodel.userInfo.ccsy" placeholder="请输入">
				</u-form-item>
				<!-- 多行文本 -->
				<view class="textarea">
					<span class='gup'>附件(0)</span>
				</view>
			</u-form>
		</view>

		<!-- 行程计划 -->
		<view class="formcard">
			<view class="bodtitle">
				<p><b>行程计划</b></p>
			</view>
			<u-form labelPosition="left" :model="usermodel" :rules="rules" ref="userform">
				<!-- 申请人 -->
				<u-form-item labelWidth="200rpx" label="申请人" prop="userInfo.name" borderBottom ref="item2">
					<input disabled class="pdlf" type="text" v-model="usermodel.userInfo.name">
				</u-form-item>
				<view style="padding: 40rpx 10rpx;">
					<view class="sky">
						<span style='flex: 1;'>2012-12-31</span>
						<p style='flex: 2;'>广州花都<label>——
								<image src="@/static/newimg/feiji.svg" class='fj'></image>
								——
							</label>武汉武昌</p>
					</view>
					<view class="sky">
						<span style='flex: 1;'>2013-01-01</span>
						<p style='flex: 2;'>武汉武昌<label>——
								<image src="@/static/newimg/feiji.svg" class='fj'></image>
								——
							</label>广州花都</p>
					</view>
				</view>
				<!-- <u-steps current="0" direction="column">
						<u-steps-item title="已下单" desc="10:30">
						</u-steps-item>
						<u-steps-item title="已出库————" desc="10:35">
						</u-steps-item>
					</u-steps> -->
			</u-form>

		</view>

		<!-- 费用预算 -->
		<view class="formcard">
			<view class="bodtitle">
				<p><b>费用预算</b></p>
			</view>
			<u-form labelPosition="left" :model="moneymodel" :rules="rules1" ref="moneyform">
				<!-- 申请人 -->
				<u-form-item required labelWidth="150rpx" label="申请人" borderBottom ref="item1">
					<input class="pdlf" type="text" disabled v-model="moneymodel.userInfo.name">
				</u-form-item>

				<!-- 申请金额 -->
				<u-form-item required labelWidth="150rpx" label="申请金额" borderBottom ref="item2">
					<input class="pdlf" type="text" v-model="moneymodel.userInfo.money">
				</u-form-item>
				<view class="skyb">
					<label class="lab">QB12789654400</label>
					<view class="skyblu">
						<span>费用科室</span>
						<p>新车型推进器</p>
					</view>
					<view class="skyblu">
						<span>预算号名称</span>
						<p>共性费用-差旅费-国内</p>
					</view>
				</view>
			</u-form>
		</view>

		<view class="bottom_setup">
			<view class="bottom_white">
				<u-button @click="handback()" class="custom-styles" :plain="true" type="primary" text="上一步(费用预算)">
				</u-button>
				<u-button @click="submit()" class="custom-style" type="primary" text="提交"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import Setps from '@/workspaces/tools/setps.vue'
	export default {
		data() {
			return {
				tit: [{
						name: '信息变更'
					},
					{
						name: '行程变更'
					},
					{
						name: '费用明细'
					},
					{
						name: '确认提交'
					},
				],
				items: [{
						value: 'true',
						name: '是',
						checked: 'true'
					},
					{
						value: 'false',
						name: '否'
					}
				],
				current: 1,
				textarea: '因疫情原因推迟出差',
				headtext: '确认提交',
				shows: false, //控制遮罩层
				//用户基本信息
				usermodel: {
					userInfo: {
						orderId: 'MCSQ2022064001',
						name: '张三一',
						userId: '6666666',
						work: '所在科室-科室名称',
						address: '',
						date: '',
						textarea: '',
						boole: '工作出差',
						isshop: true,
						prpnim: '',
						iscmd: '',
						cmdnum: '',
						xdr: '',
						ccdz: '',
						ccsy: '出差事由出差事由出差事由'
					},
				},
				//开始日期选择
				dateshow: false,
				mode: 'multiple',
				datetime: '请选择',
				isdate: true,
				//表单正则效验
				rules: {
					// 单号正则
					'userInfo.orderId': [{
							required: true,
							message: '请填订单号',
							trigger: ['blur', 'change']
						},
						{
							pattern: /^[A-Za-z0-9]+$/,
							message: '请输入正确的订单号'
						}
					],
					//姓名正则
					'userInfo.name': [{
							required: true,
							message: '请填写姓名',
							trigger: ['blur', 'change']
						},
						{
							pattern: /[\u4e00-\u9fa5]/,
							// 正则检验前先将值转为字符串
							// transform(value) {
							// 	return String(value);
							// },
							message: '请填写您的的真实姓名'
						}
					],
					//员工编号正则
					'userInfo.userId': [{
							required: true,
							message: '输入您的员工编号',
							trigger: ['blur', 'change']
						},
						{
							pattern: /^[A-Za-z0-9]+$/,
							message: '请输入正确的员工编号'
						}
					],
					//所在科室正则
					'userInfo.work': [{
							required: true,
							message: '输入您的科室名称',
							trigger: ['blur', 'change']
						},
						{
							pattern: /[\u4e00-\u9fa5]/,
							message: '请输入正确的科室名称'
						}
					],
					//日期
					'userInfo.date': [{
							required: true,
							message: '输入日期',
							trigger: ['blur', 'change']
						},
						{
							pattern: /\d{4}(\-|\/|.)\d{1,2}\1\d{1,2}/,
							message: '请输入正确的日期'
						},
					],
					// 出差理由  item7777
					'userInfo.textarea': [{
							required: true,
							message: '输入内容',
							trigger: ['blur', 'change']
						},
						{
							min: 6,
							max: 200,
							message: '内容过短'
						}
					],
				},
				//地域单选框
				addresslist: [{
						name: '是',
						disabled: false
					},
					{
						name: '否',
						disabled: false
					},
				],
				// 默认选中
				addressradio: '是',
				//出差类型单选框
				classlist: [{
						name: '境内',
						disabled: false
					},
					{
						name: '境外',
						disabled: false
					},
				],
				// 默认选中
				classradio: '境内',

				//出差申请金额列表
				moneymodel: {
					userInfo: {
						name: '张三',
						money: '999,999.00'
					}
				},
				rules1: {
					// 姓名正则
					'userInfo.name': [{
							required: true,
							message: '请填订单号',
							trigger: ['blur', 'change']
						},
						{
							pattern: /[\u4e00-\u9fa5]/,
							message: '请输入正确的姓名'
						},
					],
					'userInfo.money': [{
						type: 'number',
						required: true,
						message: '请填订单号',
						trigger: ['blur', 'change']
					}],
				},
			}
		},
		methods: {
			handback() {
				uni.navigateBack()
			},
			//出差地域
			radioChange1(n) {
				console.log('出差类型', n);
			},
			opens() {
				// console.log('open');
			},
			closes() {
				this.show = false
				// console.log('close');
			},
			nextapp() {
				this.$refs.userform.validate().then(res => {
					uni.$u.toast('校验通过')
					this.$jump('./application', 'navigate');
					// console.log(this.model1)
				}).catch(errors => {
					uni.$u.toast('校验失败')
					this.$jump('./application', 'navigate');
				})
			},
			// 开始日期选择
			date_confirm(e) {
				this.isdate = false
				console.log(e.length, e)
				let index = e.length - 1
				this.datetime = e[0]
				this.datetime1 = e[index]
				this.dateshow = false
				this.day = index
			},
			//关闭
			close() {
				this.dateshow = false
			},
			radioChange: function(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.detail.value) {
						this.current = i;
						console.log(this.items[i].value)
						break;
					}
				}
			},
			submit() {
				this.shows = true
			},
			//回到首页
			backhome(){
				uni.reLaunch({
					url:'../../views/index/index'
				})
			}
		},
		components: {
			Setps
		}
	}
</script>

<style lang="scss" scoped>
	view {
		font-family: pf;
	}

	.custom-style {
		height: 90rpx;
		background-color: #007aff;
	}

	.u-textarea {
		background-color: #fafafa;
	}


	.bottom_setup {
		width: 100%;
		height: 160rpx;
		background-color: white;
		margin-top: 40rpx;
		padding: 35rpx 0;
		box-sizing: border-box;

		.bottom_white {
			margin: 0 auto;
			display: flex;
			flex-direction: row;
			padding: 0rpx 30rpx;

			.custom-styles {
				padding: 20rpx 30rpx;
				width: 300rpx;
				height: 100rpx;
				// background-color:  #007aff;;
			}

			.custom-style {
				padding: 20rpx 30rpx;
				width: 300rpx;
				height: 100rpx;
				background-color: #007aff;
				;
			}
		}
	}

	.textarea {
		display: flex;
		flex-direction: column;

	}

	.conton {
		margin-left: 20rpx;
		width: 340rpx;
	}

	.custom-style {
		height: 90rpx;
		background-color: #007aff;
	}

	.gup {
		margin: 50rpx 0;
		padding-left: 30rpx;
		margin-top: 20rpx;
	}

	.skyb {
		width: 90%;
		margin: 20rpx auto;
		background: rgb(247, 251, 255);
		padding: 5rpx 10rpx;

		.lab {
			display: block;
			height: 80rpx;
			line-height: 80rpx;
			padding-left: 10rpx;
			border-bottom: 1px solid #f1f1f1;
		}

		.skyblu {
			display: flex;
			flex-direction: row;
			padding: 20rpx 20rpx;

			span {
				width: 170rpx;
			}

			p {
				margin-left: 30rpx;
			}
		}
	}

	.sky {
		background-color: rgb(247, 251, 255);
		margin: 0 auto;
		display: flex;
		justify-content: center;
		padding: 40rpx 10rpx;
		box-sizing: border-box;
		font-size: 28rpx;
	}

	.fj {
		padding: 0 20rpx;
		width: 40rpx;
		height: 40rpx;
		vertical-align: bottom;
		transform: scale(2);
	}
	.pops_center{
		width: 70vw;
		height: 40vh;
		padding: 40rpx 80rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		box-sizing: border-box;
		image{
			width: 150rpx;
			height: 150rpx;
			margin-top: 40rpx;
		}
		.btn{
			width: 360rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 50px;
			border: none;
			p{
				border-radius: 50px;
				text-align: center;
				font-size: 32rpx;
				color: #007aff;
				background-color:#e9f3ff ;
			}
		}
		.btn1{
			margin-top: 40rpx;
			width: 360rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 50px;
			border: none;
			p{
				border-radius: 50px;
				text-align: center;
				font-size: 32rpx;
				color: white;
				background-color:#007aff;
			}
		}
	}
	
</style>
